<template>
  <view class="pages">
    <view class="top">
      <view class="title">
        <span>标签</span>
        <view @tap="openTag()">
          <uni-icons type="plus-filled" size="30" color="#ED7467"></uni-icons>
        </view>
      </view>
      <view class="tag">
        <template v-for="(item,index) in tag">
          <view class="tag-item" :key="index">
            <view>{{item.sysBabelName}}</view>
            <uni-icons @tap="delTag(item)" style="opacity:0.8;" type="minus-filled" size="22" color="#ED7467"></uni-icons>
          </view>
        </template>
      </view>
    </view>
    <view class="bottom">
      <view class="title">
        <span>家庭信息</span>
        <view @tap="addFamily()">
          <uni-icons type="plus-filled" size="30" color="#ED7467"></uni-icons>
        </view>
      </view>
      <uni-list>
        <uni-list>
          <template v-for="(item,index) in familyList">
            <uni-list-item :key="index" clickable :title="item.customerName" :note="item.customerPhone" :thumb="item.customerSex==1?'/static/CRM/boy.png':'/static/CRM/girl.png'" thumb-size="lg" @click="upFamily(item)">
              <template slot="footer">
                <uni-tag :text="item.memberType" type="warning" size="small" disabled circle></uni-tag>
              </template>
            </uni-list-item>
          </template>
        </uni-list>
      </uni-list>
    </view>
    <!-- <view class=" bottom">
      <view class="title">
        <span>同事信息</span>
        <view @tap="addColleagues()">
          <uni-icons type="plus-filled" size="30" color="#ED7467"></uni-icons>
        </view>
      </view>
      <uni-list>
        <uni-list-item title="同事1231" note="18385545623" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" thumb-size="lg" link>
        </uni-list-item>
        <uni-list-item title="同事1231" note="18385545623" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" thumb-size="lg" link>
        </uni-list-item>
      </uni-list>
    </view> -->
    <uni-popup ref="popup" type="bottom">
      <scroll-view class="popupView" scroll-y="true">
        <view>
          <!-- <uni-data-checkbox v-model="value" mode="button" selectedColor="#ed7467" multiple :localdata="taglist"></uni-data-checkbox> -->
          <uni-data-checkbox v-model="value" mode="button" selectedColor="#ed7467" :localdata="taglist"></uni-data-checkbox>
        </view>
      </scroll-view>
      <view class="botton popupBotton">
        <button class="botton-botton1" @click="toaTag()">标签管理</button>
        <button class="botton-botton" @click="addTag()">提交</button>
      </view>
    </uni-popup>
  </view>

</template>
<script>
let id = null
export default {
  data() {
    return {
      // value: [],
      value: null,
      id: null,
      tag: [],
      taglist: [],
      familyList: []
    }
  },
  onLoad(options) {
    let _this = this
    id = options.id
    _this.getTag()
  },
  onShow() {
    let _this = this
    _this.getDatas()
    _this.getTagList()
  },
  methods: {
    /**家庭成员*/
    getDatas() {
      let _this = this
      _this.$post('/sale/wx/customer_member/get_datas', { id: id }, true).then(res => {
        if (res.code * 1 === 200) {
          _this.familyList = res.data.row
        }
      })
    },
    upFamily(row) {
      let _this = this
      uni.showModal({
        title: '警告',
        content: '本次操作将要该家庭成员',
        success: function (res) {
          if (res.confirm) {
            _this.$post('/sale/wx/customer_member/delete_data', { id: row.relationId }, true).then(res => {
              if (res.code * 1 === 200) {
                uni.showToast({
                  title: '删除成功',
                  icon: 'none'
                })
                _this.getDatas()
              }
            })
          } else if (res.cancel) {
          }
        }
      });
    },
    addFamily() {
      uni.navigateTo({
        url: `/pages/CRM/info/item0/family?id=${id}`
      });
    },
    // upFamily(row) {
    //   uni.setStorage({
    //     key: 'user_key',
    //     data: row,
    //     success: function () {
    //       uni.navigateTo({
    //         url: `/pages/CRM/info/item0/family?id=${id}`
    //       });
    //     }
    //   });
    // },
    /**查询标签*/
    getTag() {
      const _this = this
      _this.$post('/sale/wx/customer_babel/get_datas', { customerId: id }, false).then(res => {
        if (res.code * 1 === 200) {
          _this.tag = res.data
        }
      })
    },
    /**添加标签*/
    getTagList() {
      let _this = this
      _this.$post('/sale/wx/sys_babel/get_datas', {}, false).then(res => {
        if (res.code * 1 === 200) {
          _this.taglist = res.data.map(res => ({ value: res.id, text: res.babelName }))
          /**处理数据*/
        }
      })
    },
    toaTag() {
      uni.navigateTo({
        url: '/pages/CRM/info/item0/tagList'
      });
    },
    openTag() {
      this.value = null
      this.$refs.popup.open()
    },
    addTag() {
      const _this = this
      if (!_this.value) {
        return
      }
      _this.$post('/sale/wx/customer_babel/add_data', { customerId: id, sysBabelId: _this.value }, true).then(res => {
        if (res.code * 1 === 200) {
          uni.showToast({
            icon: "none",
            title: "新增成功",
            position: "bottom"
          })
          _this.$refs.popup.close()
          _this.getTag()
        }
      })
    },
    delTag(e) {
      const _this = this
      _this.$post('/sale/wx/customer_babel/delete_data', { id: e.id }, true).then(res => {
        if (res.code * 1 === 200) {
          uni.showToast({
            icon: "none",
            title: "删除成功",
            position: "bottom"
          })
          _this.getTag()
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.pages {
  background: #f2f2f2;
  min-height: 100vh;
  padding: 10px 3vw;
}
.top,
.bottom {
  background: #fff;
  border-radius: 4px;
  width: 94vw;
}
.bottom {
  margin-top: 10px;
}
.title {
  font-size: 16px;
  font-weight: bold;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.popupView {
  padding: 10px 3vw;
  height: 40vh;
  overflow: auto;
  background: #fff;
}

.botton {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  &-botton {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    border-radius: 20px;
    width: 35vw;
    color: #fff;
    background: #ed7467;
  }
  &-botton1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    border-radius: 20px;
    width: 35vw;
    color: #ed7467;
    border: 1px solid #ed7467;
    background: #fff;
  }
}
.popupBotton {
  background: #fff;
  padding: 10px 30px;
}
.tag {
  padding: 0 0px 0px 10px;
  display: flex;
  flex-wrap: wrap;
  &-item {
    margin: 0 10px 10px 0;
    padding: 0px 7px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    border: 1px solid #ed7467;
    color: #96968e;
    > view {
      padding-right: 5px;
    }
  }
}
</style>